<template>
  <div class="canvas-container" @drop="handleDrop" @dragover.prevent @dragenter.prevent @click="handleCanvasClick">
    <!-- 画布背景 -->
    <div class="canvas-background" :style="canvasStyle">
      <!-- 网格线 -->
      <div class="grid-lines" v-if="showGrid">
        <div 
          v-for="i in gridCount.vertical" 
          :key="'v-' + i" 
          class="grid-line vertical"
          :style="{ left: i * gridSize + 'px' }"
        ></div>
        <div 
          v-for="i in gridCount.horizontal" 
          :key="'h-' + i" 
          class="grid-line horizontal"
          :style="{ top: i * gridSize + 'px' }"
        ></div>
      </div>

      <!-- 磁吸对齐线 -->
      <div v-if="showSnapLines && selectedComponentId" class="snap-lines">
        <div v-if="snapState.vertical" class="snap-line vertical" :style="{ left: snapState.vertical + 'px' }"></div>
        <div v-if="snapState.horizontal" class="snap-line horizontal" :style="{ top: snapState.horizontal + 'px' }"></div>
      </div>

      <!-- 组件渲染区域 -->
      <div 
        v-for="component in components"
        :key="`${component.id}_${component.style ? JSON.stringify(component.style) : ''}_${component.props ? JSON.stringify(component.props) : ''}`"
        class="canvas-component"
        :class="{ 
          selected: selectedComponentId === component.id,
          dragging: draggingComponentId === component.id 
        }"
        :style="getComponentStyle(component)"
        @click.stop="selectComponent(component)"
        @mousedown="startDrag($event, component)"
      >

        
        <!-- 组件内容 -->
        <component 
          :is="getComponentTag(component.type)"
          :component-data="component"
          @update="updateComponent"
          @delete="deleteComponent"
        />

        <!-- 选中状态的控制点 -->
        <div v-if="selectedComponentId === component.id" class="selection-handles">
          <div 
            v-for="handle in getHandles(component)" 
            :key="handle.id"
            :class="['handle', handle.id]"
            @mousedown.stop="startResize($event, component, handle.id)"
          ></div>
        </div>

        <!-- 组件工具栏 -->
        <div v-if="selectedComponentId === component.id" class="component-toolbar">
          <div class="toolbar-buttons">
            <button class="toolbar-btn copy-btn" @click="copyComponent(component)" title="复制">
              <i class="el-icon-document-copy"></i>
            </button>
            <button class="toolbar-btn delete-btn" @click="deleteComponent(component.id)" title="删除">
              <i class="el-icon-delete"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 标尺 -->
    <div class="rulers" v-if="showRulers">
      <div class="ruler horizontal">
        <div 
          v-for="mark in rulerMarks.horizontal" 
          :key="'h-mark-' + mark"
          class="ruler-mark"
          :style="{ left: mark + 'px' }"
        >
          <span class="ruler-label">{{ mark }}</span>
        </div>
      </div>
      <div class="ruler vertical">
        <div 
          v-for="mark in rulerMarks.vertical" 
          :key="'v-mark-' + mark"
          class="ruler-mark"
          :style="{ top: mark + 'px' }"
        >
          <span class="ruler-label">{{ mark }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted, onUnmounted } from 'vue'
// 注意：这里不需要导入Element Plus组件，因为项目使用Element UI
import type { ComponentConfig } from '../interface'

// 组件导入
import TextComponent from './components/TextComponent.vue'
import ButtonComponent from './components/ButtonComponent.vue'
import InputComponent from './components/InputComponent.vue'
import ContainerComponent from './components/ContainerComponent.vue'
import ImageComponent from './components/ImageComponent.vue'
import VideoComponent from './components/VideoComponent.vue'
import ChartComponent from './components/ChartComponent.vue'
import MapComponent from './components/MapComponent.vue'
import CompassComponent from './components/CompassComponent.vue'
import ScaleComponent from './components/ScaleComponent.vue'

// Props
interface Props {
  projectId: string
  components: ComponentConfig[]
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'component-select': [component: ComponentConfig | null]
  'component-update': [componentId: string, updates: Partial<ComponentConfig>]
  'component-delete': [componentId: string]
  'component-add': [componentType: string, position: { x: number, y: number }]
}>()

// 响应式数据
const selectedComponentId = ref('')
const draggingComponentId = ref('')
const showGrid = ref(true)
const showRulers = ref(true)
const showSnapLines = ref(true)
const gridSize = ref(20)
const canvasWidth = ref(1920)
const canvasHeight = ref(1080)

// 磁吸状态
const snapState = reactive({
  vertical: null as number | null,
  horizontal: null as number | null
})

// 调试：监听components变化
import { watch } from 'vue'
watch(() => props.components, (newComponents) => {
  console.log('CanvasComponent: components changed:', newComponents)
  console.log('Components length:', newComponents?.length)
  if (newComponents && newComponents.length > 0) {
    console.log('First component:', newComponents[0])
  }
}, { immediate: true })

// 拖拽相关状态
const dragState = reactive({
  isDragging: false,
  isResizing: false,
  startX: 0,
  startY: 0,
  startPosition: { x: 0, y: 0, width: 0, height: 0 },
  startSize: { width: 0, height: 0 },
  resizeHandle: '',
})

// 控制点 - 根据组件形状动态生成
const getHandles = (component: ComponentConfig) => {
  const { type, style } = component
  
  // 圆形组件使用圆形锚点
  if (type === 'input') {
    return [
      { id: 'n', position: 'top', cursor: 'n-resize' },
      { id: 's', position: 'bottom', cursor: 's-resize' },
      { id: 'w', position: 'left', cursor: 'w-resize' },
      { id: 'e', position: 'right', cursor: 'e-resize' },
      { id: 'nw', position: 'top-left', cursor: 'nw-resize' },
      { id: 'ne', position: 'top-right', cursor: 'ne-resize' },
      { id: 'sw', position: 'bottom-left', cursor: 'sw-resize' },
      { id: 'se', position: 'bottom-right', cursor: 'se-resize' }
    ]
  }
  
  // 长方形组件使用矩形锚点
  if (type === 'button') {
    return [
      { id: 'n', position: 'top', cursor: 'n-resize' },
      { id: 's', position: 'bottom', cursor: 's-resize' },
      { id: 'w', position: 'left', cursor: 'w-resize' },
      { id: 'e', position: 'right', cursor: 'e-resize' },
      { id: 'nw', position: 'top-left', cursor: 'nw-resize' },
      { id: 'ne', position: 'top-right', cursor: 'ne-resize' },
      { id: 'sw', position: 'bottom-left', cursor: 'sw-resize' },
      { id: 'se', position: 'bottom-right', cursor: 'se-resize' }
    ]
  }
  
  // 默认使用标准锚点
  return [
    { id: 'n', position: 'top', cursor: 'n-resize' },
    { id: 's', position: 'bottom', cursor: 's-resize' },
    { id: 'w', position: 'left', cursor: 'w-resize' },
    { id: 'e', position: 'right', cursor: 'e-resize' },
    { id: 'nw', position: 'top-left', cursor: 'nw-resize' },
    { id: 'ne', position: 'top-right', cursor: 'ne-resize' },
    { id: 'sw', position: 'bottom-left', cursor: 'sw-resize' },
    { id: 'se', position: 'bottom-right', cursor: 'se-resize' }
  ]
}

// 磁吸对齐功能
const snapToGrid = (value: number, gridSize: number) => {
  return Math.round(value / gridSize) * gridSize
}

const snapToBoundary = (value: number, min: number, max: number, threshold: number = 10) => {
  if (Math.abs(value - min) <= threshold) return min
  if (Math.abs(value - max) <= threshold) return max
  return value
}

// 应用磁吸对齐
const applySnapping = (x: number, y: number, width: number, height: number) => {
  let snappedX = x
  let snappedY = y
  
  // 重置对齐线状态
  snapState.vertical = null
  snapState.horizontal = null
  
  // 网格对齐
  snappedX = snapToGrid(x, gridSize.value)
  snappedY = snapToGrid(y, gridSize.value)
  
  // 边界对齐 - 修复左边和上边的磁吸逻辑
  const leftBoundary = 0
  const rightBoundary = canvasWidth.value - width
  const topBoundary = 0
  const bottomBoundary = canvasHeight.value - height
  
  console.log('Magnetic snapping debug:', {
    x, y, width, height,
    leftBoundary, rightBoundary, topBoundary, bottomBoundary,
    leftDistance: Math.abs(x - leftBoundary),
    rightDistance: Math.abs(x - rightBoundary),
    topDistance: Math.abs(y - topBoundary),
    bottomDistance: Math.abs(y - bottomBoundary)
  })
  
  // 左边磁吸
  if (Math.abs(x - leftBoundary) <= 10) {
    snappedX = leftBoundary
    snapState.vertical = leftBoundary
    console.log('Left boundary snapped!')
  }
  // 右边磁吸
  else if (Math.abs(x - rightBoundary) <= 10) {
    snappedX = rightBoundary
    snapState.vertical = rightBoundary + width
    console.log('Right boundary snapped!')
  }
  
  // 上边磁吸
  if (Math.abs(y - topBoundary) <= 10) {
    snappedY = topBoundary
    snapState.horizontal = topBoundary
    console.log('Top boundary snapped!')
  }
  // 下边磁吸
  else if (Math.abs(y - bottomBoundary) <= 10) {
    snappedY = bottomBoundary
    snapState.horizontal = bottomBoundary + height
    console.log('Bottom boundary snapped!')
  }
  
  // 中心线对齐
  const centerX = canvasWidth.value / 2
  const centerY = canvasHeight.value / 2
  const componentCenterX = x + width / 2
  const componentCenterY = y + height / 2
  
  if (Math.abs(componentCenterX - centerX) <= 10) {
    snappedX = centerX - width / 2
    snapState.vertical = centerX
    console.log('Center X snapped!')
  }
  if (Math.abs(componentCenterY - centerY) <= 10) {
    snappedY = centerY - height / 2
    snapState.horizontal = centerY
    console.log('Center Y snapped!')
  }
  
  console.log('Final snapped position:', { x: snappedX, y: snappedY })
  console.log('Snap state:', snapState)
  
  return { x: snappedX, y: snappedY }
}

// 计算属性
const canvasStyle = computed(() => ({
  width: canvasWidth.value + 'px',
  height: canvasHeight.value + 'px',
}))

const gridCount = computed(() => ({
  vertical: Math.ceil(canvasWidth.value / gridSize.value),
  horizontal: Math.ceil(canvasHeight.value / gridSize.value),
}))

const rulerMarks = computed(() => {
  const horizontalMarks = []
  const verticalMarks = []
  
  for (let i = 0; i <= canvasWidth.value; i += 100) {
    horizontalMarks.push(i)
  }
  
  for (let i = 0; i <= canvasHeight.value; i += 100) {
    verticalMarks.push(i)
  }
  
  return {
    horizontal: horizontalMarks,
    vertical: verticalMarks,
  }
})

// 获取组件样式
const getComponentStyle = (component: ComponentConfig) => {
  const { position, style } = component
  console.log('getComponentStyle called for component:', component.id)
  console.log('Component style:', style)
  
  const componentStyle = {
    position: 'absolute' as const,
    left: position.x + 'px',
    top: position.y + 'px',
    width: position.width + 'px',
    height: position.height + 'px',
    zIndex: style?.zIndex || 1,
    // 应用所有样式属性
    backgroundColor: style?.backgroundColor || 'transparent',
    borderColor: style?.borderColor || 'transparent',
    borderWidth: style?.borderWidth || '0px',
    borderRadius: style?.borderRadius || '0px',
    opacity: style?.opacity || 1,
    ...style,
  }
  
  console.log('Final component style:', componentStyle)
  return componentStyle
}

// 获取组件标签
const getComponentTag = (type: string) => {
  const componentMap: Record<string, any> = {
    text: TextComponent,
    button: ButtonComponent,
    input: InputComponent,
    container: ContainerComponent,
    image: ImageComponent,
    video: VideoComponent,
    'line-chart': ChartComponent,
    'bar-chart': ChartComponent,
    'pie-chart': ChartComponent,
    'base-map': MapComponent,
    'heat-map': MapComponent,
    'map-compass': CompassComponent,
    'map-scale': ScaleComponent,
  }
  
  return componentMap[type] || TextComponent
}

// 选择组件
const selectComponent = (component: ComponentConfig) => {
  console.log('=== selectComponent called ===')
  console.log('Component to select:', component)
  selectedComponentId.value = component.id
  console.log('Emitting componentSelect event with:', component)
  emit('component-select', component)
  console.log('Event emitted successfully')
}

// 处理画布点击（取消选中）
const handleCanvasClick = (event: MouseEvent) => {
  console.log('Canvas click event:', event.target, event.currentTarget)
  
  // 检查点击的目标元素
  const target = event.target as HTMLElement
  
  // 如果点击的是画布背景、网格线或标尺，则取消选中
  if (target.classList.contains('canvas-background') || 
      target.classList.contains('grid-lines') || 
      target.classList.contains('grid-line') ||
      target.classList.contains('rulers') ||
      target.classList.contains('ruler')) {
    console.log('Clicking on canvas background, clearing selection')
    selectedComponentId.value = ''
    emit('component-select', null)
  }
}

// 开始拖拽
const startDrag = (event: MouseEvent, component: ComponentConfig) => {
  event.preventDefault()
  
  dragState.isDragging = true
  draggingComponentId.value = component.id
  dragState.startX = event.clientX
  dragState.startY = event.clientY
  dragState.startPosition = { ...component.position }
  
  selectComponent(component)
  
  document.addEventListener('mousemove', handleDrag)
  document.addEventListener('mouseup', stopDrag)
}

// 处理拖拽
const handleDrag = (event: MouseEvent) => {
  if (!dragState.isDragging) return
  
  const deltaX = event.clientX - dragState.startX
  const deltaY = event.clientY - dragState.startY
  
  let newX = Math.max(0, dragState.startPosition.x + deltaX)
  let newY = Math.max(0, dragState.startPosition.y + deltaY)
  
  // 边界限制：确保组件不超出画布
  const maxX = canvasWidth.value - dragState.startPosition.width
  const maxY = canvasHeight.value - dragState.startPosition.height
  newX = Math.min(maxX, newX)
  newY = Math.min(maxY, newY)
  
  // 应用磁吸对齐
  const snapped = applySnapping(newX, newY, dragState.startPosition.width, dragState.startPosition.height)
  
  updateComponent(draggingComponentId.value, {
    position: {
      x: snapped.x,
      y: snapped.y,
      width: dragState.startPosition.width,
      height: dragState.startPosition.height,
    }
  })
}

// 停止拖拽
const stopDrag = () => {
  dragState.isDragging = false
  draggingComponentId.value = ''
  
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('mouseup', stopDrag)
}

// 开始调整大小
const startResize = (event: MouseEvent, component: ComponentConfig, handle: string) => {
  event.preventDefault()
  event.stopPropagation()
  
  dragState.isResizing = true
  dragState.resizeHandle = handle
  draggingComponentId.value = component.id
  dragState.startX = event.clientX
  dragState.startY = event.clientY
  dragState.startPosition = { ...component.position }
  dragState.startSize = { width: component.position.width, height: component.position.height }
  
  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
}

// 处理调整大小
const handleResize = (event: MouseEvent) => {
  if (!dragState.isResizing) return
  
  const deltaX = event.clientX - dragState.startX
  const deltaY = event.clientY - dragState.startY
  const { resizeHandle } = dragState
  
  let newPosition = { ...dragState.startPosition }
  let newWidth = dragState.startSize.width
  let newHeight = dragState.startSize.height
  
  // 根据拖拽控制点计算新的位置和大小
  if (resizeHandle.includes('e')) {
    newWidth = Math.max(20, dragState.startSize.width + deltaX)
    // 右边边界限制
    newWidth = Math.min(newWidth, canvasWidth.value - newPosition.x)
  }
  if (resizeHandle.includes('w')) {
    newWidth = Math.max(20, dragState.startSize.width - deltaX)
    newPosition.x = dragState.startPosition.x + deltaX
    // 左边边界限制
    if (newPosition.x < 0) {
      newWidth += newPosition.x
      newPosition.x = 0
    }
  }
  if (resizeHandle.includes('s')) {
    newHeight = Math.max(20, dragState.startSize.height + deltaY)
    // 下边边界限制
    newHeight = Math.min(newHeight, canvasHeight.value - newPosition.y)
  }
  if (resizeHandle.includes('n')) {
    newHeight = Math.max(20, dragState.startSize.height - deltaY)
    newPosition.y = dragState.startPosition.y + deltaY
    // 上边边界限制
    if (newPosition.y < 0) {
      newHeight += newPosition.y
      newPosition.y = 0
    }
  }
  
  // 应用磁吸对齐到调整后的位置
  const snapped = applySnapping(newPosition.x, newPosition.y, newWidth, newHeight)
  
  updateComponent(draggingComponentId.value, {
    position: {
      x: snapped.x,
      y: snapped.y,
      width: newWidth,
      height: newHeight,
    }
  })
}

// 停止调整大小
const stopResize = () => {
  dragState.isResizing = false
  draggingComponentId.value = ''
  
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
}

// 处理拖放
const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  
  console.log('Drop event triggered')
  console.log('Event dataTransfer:', event.dataTransfer)
  
  const componentType = event.dataTransfer?.getData('component-type')
  if (!componentType) {
    console.log('No component type found in drag data')
    console.log('Available types:', event.dataTransfer?.types)
    return
  }
  
  console.log('Drop detected, component type:', componentType)
  
  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
  let x = event.clientX - rect.left
  let y = event.clientY - rect.top
  
  console.log('Drop position:', { x, y })
  
  // 边界限制：确保组件不超出画布
  const defaultWidth = 100
  const defaultHeight = 100
  const maxX = canvasWidth.value - defaultWidth
  const maxY = canvasHeight.value - defaultHeight
  
  x = Math.max(0, Math.min(maxX, x))
  y = Math.max(0, Math.min(maxY, y))
  
  // 应用磁吸对齐到拖放位置
  const snapped = applySnapping(x, y, defaultWidth, defaultHeight)
  
  console.log('Snapped position:', snapped)
  
  // 通过emit通知父组件添加新组件
  console.log('Emitting component-add event with:', componentType, snapped)
  emit('component-add', componentType, snapped)
  console.log('Event emitted successfully')
}

// 更新组件
const updateComponent = (componentId: string, updates: Partial<ComponentConfig>) => {
  console.log('CanvasComponent: updateComponent called', componentId, updates)
  emit('component-update', componentId, updates)
}

// 复制组件
const copyComponent = (component: ComponentConfig) => {
  console.log('=== copyComponent called ===')
  console.log('Component to copy:', component)
  
  const newComponent = {
    ...component,
    id: `component_${Date.now()}`,
    position: {
      ...component.position,
      x: component.position.x + 20,
      y: component.position.y + 20,
    }
  }
  
  console.log('New component created:', newComponent)
  // 发出 component-add 事件来添加新组件
  emit('component-add', newComponent.type, newComponent.position)
}

// 删除组件
const deleteComponent = (componentId: string) => {
      emit('component-delete', componentId)
  if (selectedComponentId.value === componentId) {
    selectedComponentId.value = ''
  }
}

// 键盘事件处理
const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Delete' && selectedComponentId.value) {
    deleteComponent(selectedComponentId.value)
  }
}

// 生命周期
onMounted(() => {
  document.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeyDown)
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('mouseup', stopDrag)
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})
</script>

<style lang="scss" scoped>
.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #f0f0f0;
}

.canvas-background {
  position: relative;
  background-color: #fff;
  margin: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  .grid-line {
    position: absolute;
    
    &.vertical {
      width: 1px;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.1);
    }
    
    &.horizontal {
      width: 100%;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}

.snap-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;

  .snap-line {
    position: absolute;
    background-color: rgba(0, 255, 0, 0.6); /* 更明显的绿色 */
    pointer-events: none;
    box-shadow: 0 0 4px rgba(0, 255, 0, 0.4); /* 添加发光效果 */

    &.vertical {
      width: 2px; /* 稍微加粗 */
      height: 100%;
    }

    &.horizontal {
      width: 100%;
      height: 2px; /* 稍微加粗 */
    }
  }
}

.canvas-component {
  cursor: move;
  border: 1px dashed transparent;
  
  &:hover {
    border-color: #409eff;
  }
  
  &.selected {
    border-color: #409eff;
    border-style: solid;
  }
  
  &.dragging {
    opacity: 0.8;
    z-index: 1000;
  }
}

.selection-handles {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  pointer-events: none;

  .handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #409eff;
    border: 1px solid #fff;
    pointer-events: all;
    transition: all 0.2s ease;
    
    // 圆形组件的锚点样式
    .canvas-component:has(.circle-text-component) & {
      border-radius: 50%;
      width: 10px;
      height: 10px;
    }
    
    // 长方形组件的锚点样式
    .canvas-component:has(.square-text-component) & {
      border-radius: 2px;
      width: 8px;
      height: 8px;
    }
    
    // 磁吸状态样式
    &.snapping {
      background-color: #67c23a;
      transform: scale(1.2);
      box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
    }
    
    &.nw { top: 0; left: 0; cursor: nw-resize; }
    &.n { top: 0; left: 50%; transform: translateX(-50%); cursor: n-resize; }
    &.ne { top: 0; right: 0; cursor: ne-resize; }
    &.w { top: 50%; left: 0; transform: translateY(-50%); cursor: w-resize; }
    &.e { top: 50%; right: 0; transform: translateY(-50%); cursor: e-resize; }
    &.sw { bottom: 0; left: 0; cursor: sw-resize; }
    &.s { bottom: 0; left: 50%; transform: translateX(-50%); cursor: s-resize; }
    &.se { bottom: 0; right: 0; cursor: se-resize; }
    
    &:hover {
      background-color: #67c23a;
      transform: scale(1.1);
      box-shadow: 0 0 6px rgba(103, 194, 58, 0.4);
    }
  }
}

.component-toolbar {
  position: absolute;
  top: -32px;
  right: 0;
  z-index: 1001;

  .toolbar-buttons {
    display: flex;
    gap: 4px;

    .toolbar-btn {
      width: 24px;
      height: 24px;
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 3px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: all 0.2s;

      &:hover {
        border-color: #409eff;
        color: #409eff;
      }

      &.copy-btn:hover {
        background-color: #ecf5ff;
      }

      &.delete-btn:hover {
        border-color: #f56c6c;
        color: #f56c6c;
        background-color: #fef0f0;
      }
    }
  }
}

.rulers {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;

  .ruler {
    position: absolute;
    background-color: #f5f5f5;
    border: 1px solid #ddd;

    &.horizontal {
      top: 0;
      left: 20px;
      right: 20px;
      height: 20px;
    }

    &.vertical {
      top: 20px;
      left: 0;
      bottom: 20px;
      width: 20px;
    }

    .ruler-mark {
      position: absolute;
      
      .ruler-label {
        font-size: 10px;
        color: #666;
      }
    }
  }
}
</style>
